<template>
<div class="top">
  <div class="top-bg">
    <div class="item" v-for="(item,index) in items" :key="index" @click="jumpTo(item.url)">
        {{ item.name }}
      </div>
  </div>
</div>
</template>
<script>

export default {
  name: 'MainTop',
  data() {
    return {
      items: [
        {
          name: '首页',
          url: '/'
        },
        {
          name: 'TypeScript',
          url: '/typescript'
        },
        {
          name: 'Vue3',
          url: '/vue3'
        }
      ]
    }
  },
  methods: {
    jumpTo(path) {
      // 跳转路由有两种方式
      // 1、RouterLink 通过组件的方式
      // 2、this.$router.push 自定义事件来触发
      this.$router.push(path);
    }
  }
}

</script>
<style>
.top {
  width: 100%;
  height: 50px;
  background-color: bisque;
}
.top-bg {
  width: 1200px;
  height: 50px;
  display: flex;
  background-color: red;
  margin: 0 auto;
}
.item {
  width: 120px;
  height: 50px;
  line-height: 50px;
  padding: 0px 10px;
  text-align: center;
  color: green;
  cursor: pointer;
}
.item:hover {
  color: #fff;
}
</style>
